  import React from 'react'
import { useState, useEffect } from 'react'
import { useSearchParams } from 'react-router'
import styles from './index.module.less'
import { ArrowLeft } from '@react-vant/icons';
import axios from '@/api'
import { useNavigate } from 'react-router-dom'

export default function NoteDetail() {

  const [noteDetail, setNoteDetail] = useState({})
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  const note_id = searchParams.get('id')
  
  useEffect(()=>{
    axios.get(`/findNoteDetailById?note_id=${note_id}`).then(res=>{
      // console.log(`note_id:${note_id}`);
      // console.log(res.data);
      console.log(res);
      
      setNoteDetail(res.data)
    })
  },[])
  return (
    <div className={styles['note-detail']}>
      <div className={styles['back']} onClick={()=>{
          navigate(-1)
        }}>
        <ArrowLeft fontSize={24}  />
      </div>
      <div className={styles['note-img']}>    
        <img src={noteDetail.note_img} alt="" />
      </div>
      <div className={styles['note-content']}>
        <div className={styles['tab']}>
          <span className={styles['note_type']}>类型：{noteDetail.note_type}</span>
          <span className={styles['author']}>作者：{localStorage.getItem('username')}</span>
        </div>
        <p className={styles['title']}>主题：{noteDetail.note_title}</p>
        <div className={styles['content']} dangerouslySetInnerHTML={{__html:noteDetail.note_content}}>
        </div>
      </div>
    </div>
  )
}